<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>demo02</title>
    <style type="text/css">
    .box{ width: 100%; height: 1000px; border: 1px solid #8841AB; }
    .grey{ width: 100px; height: 100px; border: 1px solid #DDD; }
    </style>
</head>
<body>
    <div class="box box1">
        <div class="grey grey11">11</div>
        <div class="grey grey12">22</div>
        <div class="grey grey13">33</div>
    </div>
    <div class="box box2">
        <div class="grey grey21">11</div>
        <div class="grey grey22">22</div>
        <div class="grey grey23">33</div>
    </div>
    <div class="box box3">
        <div class="grey grey31">11</div>
        <div class="grey grey32">22</div>
        <div class="grey grey33">33</div>
    </div>
    
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>    
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.js"></script>

<script type="text/javascript">
//gsap.registerPlugin(ScrollMagic)
let tl = gsap.timeline({
    // 添加到整个时间线 
    scrollTrigger: {
        trigger: ".box3",
        pin: true,   // 在执行时固定触发器元素
        start: "top top", // 当触发器的顶部碰到视口的顶部时
        
    }
});
 
// 向时间线添加动画和标签 
tl.addLabel("start")
  .from(".grey31", {backgroundColor: "#28a92b"})
  .addLabel("spin")
  .to(".grey31", {rotation: 360})
  .addLabel("end");
</script>
</html>
